<template>
  <PCard class="change-registration-info-con" :isCardBorder="true" :shadow="'never'" :isHeadBottomBorder="true"
    :bodyStyle="{ width: '100%' }">
    <div slot="header" class="card-title">
      <span>工商注册信息变更</span>
      <a-button style="float: right; width: 100px;" type="primary" @click="saveData" block icon="check"> 提 交 </a-button>
    </div>
    <div class="cri-body">
      <div class="cri-item">
        <div class="key">变更企业：</div>
        <div class="value">{{ entName }}</div>
      </div>
      <div class="cri-item">
        <a-tabs default-active-key="1" @change="callback" style="width: 100%;">
          <a-tab-pane key="1" tab="企业名称变更">
            <PageForm ref="entNameChange" formKey="entNameChange" :formConfig="formConfig.entNameChangeForm"
              :itemList="formList.entNameChangeForm" :formEvent="formEvent"></PageForm>
          </a-tab-pane>
          <!-- <a-tab-pane key="2" tab="注册地址变更" force-render>
            <PageForm ref="registeredAddressChange" formKey="registeredAddressChange" :formConfig="formConfig.registeredAddressChange"
              :itemList="formList.registeredAddressChange" :formEvent="formEvent"></PageForm>
          </a-tab-pane> -->
          <a-tab-pane key="3" tab="经营范围变更">
            <!-- <div class="jylb-list-con" :key="index + '-list'" v-for="(item, index) in formList.NatureBusinessChange">
              <div class="list-item">
                <div class="key">原经营类别：</div>
                <div class="value">
                  <a-cascader :options="options" disabled :default-value="item.oldDefaultValue"
                    placeholder="Please select"
                    @change="(...args) => { cascaderChangeEvent('old', index, item, ...args) }" />
                </div>
              </div>
              <div class="list-item">
                <div class="key">变更后经营类别：</div>
                <div class="value">
                  <a-cascader :options="options" v-model="item.newValue" placeholder="请选择变更后经营类别"
                    @change="(...args) => { cascaderChangeEvent('new', index, item, ...args) }" />
                </div>
              </div>
            </div> -->
            <div class="jylb-con">
              <div class="data-list">
                <div :key="'jylb-data-item-' + index" v-for="(item, index) in formList.NatureBusinessChange">
                  <div class="jylb-data-item" v-if="item.status != 'delete'">

                    <div class="item-value" v-if="item.type == 'db' && item.status != 'delete'"
                      :title="item.dataList.join('|')">{{ item.dataList.join('|') }}</div>
                    <div class="item-action" v-if="item.type == 'db' && item.status != 'delete'"> <a-button type="link"
                        @click="deleEvent(item, index)">删 除</a-button></div>

                    <div class="item-value" v-if="item.type == 'new' && item.status != 'delete'"
                      :title="item.dataList.join('|')">
                      <a-cascader :options="options" v-model="item.dataList" placeholder="请选择变更后经营类别"
                        @change="(...args) => { cascaderChangeEvent('new', index, item, ...args) }" />
                    </div>
                    <div class="item-action" v-if="item.type == 'new' && item.status != 'delete'"> <a-button type="link"
                        @click="deleEvent(item, index)">删 除</a-button></div>

                  </div>
                </div>
                <div v-if="NatureBusinessChangeCount == 0">
                  <a-result sub-title="点击右侧【新增】按钮添加经营范围">
                    <template #icon>
                      <!-- <a-icon type="database" theme="twoTone" /> -->
                      <a-empty />
                    </template>
                  </a-result>
                </div>
              </div>
              <div class="data-action"><a-button type="primary" icon="plus" @click="addEvent">新 增</a-button></div>
            </div>
          </a-tab-pane>
          <!-- <a-tab-pane key="4" tab="企业法人变更" >
            <PageForm ref="ChangeLegalPerson" formKey="ChangeLegalPerson" :formConfig="formConfig.ChangeLegalPerson"
              :itemList="formList.ChangeLegalPerson" :formEvent="formEvent"></PageForm>
          </a-tab-pane> -->
        </a-tabs>

      </div>
    </div>
    <div class="cri-bottom">
      <!-- <a-button type="primary" @click="saveData" block icon="check"> 提 交 </a-button> -->
    </div>
  </PCard>
</template>

<script>
import getDataForDB from '@/api/qsbserviceEnterprise'
const formConfig_ = {
  columnCount: 2,
  layout: 'horizontal',
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
  rowAttr: {},
  celAttr: {
    // flex:'',
    // offset:'',
    // order:'',
    // pull:'',
    // push:'',
    span: '12',
    // xxl:{},
  }
}
const formConfig_1 = {
  columnCount: 1,
  layout: 'horizontal',
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
  rowAttr: {},
  celAttr: {
    // flex:'',
    // offset:'',
    // order:'',
    // pull:'',
    // push:'',
    // span:'12',
    // xxl:{},
  }
}
const formItemAttr_ = { labelCol: { span: 8 }, wrapperCol: { span: 15 } }
const formItemAttr_1 = { labelCol: { span: 4 }, wrapperCol: { span: 15 } }

const ll = [
  {
    value: '1',
    label: 'Zhejiang',
    children: [
      {
        value: '11',
        label: 'Hangzhou',
        children: [
          {
            value: '111',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: 'Jiangsu',
    children: [
      {
        value: '21',
        label: 'Nanjing',
        children: [
          {
            value: '211',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
]

export default {
  name: 'ChangeRegistrationInfo',
  props: {
    coloseEvent: { type: Function },
    serviceInfo: { type: Object }
  },
  data() {
    return {
      entName: '--',
      entId: '',
      formConfig: {
        entNameChangeForm: formConfig_,
        registeredAddressChange: formConfig_1,
        ChangeLegalPerson: formConfig_1,
      },
      options: ll,
      optionObj: {},
      resForm: {

      },
      formList: {
        entNameChangeForm: [
          { enName: 'entName1', cnName: '备选企业名称1', type: 'input', value: '', formItemAttr: formItemAttr_ },
          { enName: 'entName2', cnName: '备选企业名称2', type: 'input', value: '', formItemAttr: formItemAttr_ },
          { enName: 'entName3', cnName: '备选企业名称3', type: 'input', value: '', formItemAttr: formItemAttr_ },
          { enName: 'entName4', cnName: '备选企业名称4', type: 'input', value: '', formItemAttr: formItemAttr_ },
          { enName: 'entName5', cnName: '备选企业名称5', type: 'input', value: '', formItemAttr: formItemAttr_ },
        ],
        registeredAddressChange: [
          { enName: 'userName10', cnName: '现用地址', type: 'label', value: '北京市朝阳区建国路93号万达广场', formItemAttr: formItemAttr_1 },
          { enName: 'userName20', cnName: '目标地址', type: 'input', value: '', formItemAttr: formItemAttr_1 },
        ],
        NatureBusinessChange: [
          // { oldDefaultValue: ['4', '3'], newValue: [] },
          // { oldDefaultValue: ['226', '231'], newValue: [] },
          // { oldDefaultValue: ['401'], newValue: [] },
          // { oldDefaultValue: ['421'], newValue: [] },
          // dataList 表示数据集合 parentName 类别  nodeNature  经营范围
          // type => db 表示数据库  new 表示新增
          // status => 默认为 ''  delete 表示删除   add 表示新增
          // { type: 'db', status: '', dataList: ['类别', '经营范围北京市朝阳区建国路93号万达广场北京市朝阳区建国路93号万达广场北京市朝阳区建国路93号万达广场北京市朝阳区建国路93号万达广场'] },
          // { type: 'db', status: '', dataList: ['类别1', '经营范围北京市朝阳区建国路93号万达广场北京市朝阳区建国路93号万达广场北京市朝阳区建国路93号万达广场北京市朝阳区建国路93号万达广场'] },
          // { type: 'db', status: '', dataList: ['类别2', '经营范围北京市朝阳区建国路93号万达广场北京市朝阳区建国路93号万达广场北京市朝阳区建国路93号万达广场北京市朝阳区建国路93号万达广场'] },
          // { type: 'new', status: '', dataList: [] },
          // {type:'new',status:'',dataList:[]},
          // {type:'new',status:'',dataList:[]},
        ],
        NatureBusinessChangeDB: [],
        ChangeLegalPerson: [
          { enName: 'userName10', cnName: '原法人', type: 'label', value: '张xx', formItemAttr: formItemAttr_1 },
          { enName: 'userName20', cnName: '新法人', type: 'input', value: '', formItemAttr: formItemAttr_1 },
        ],

      },
    }
  },
  computed: {
    NatureBusinessChangeCount() {
      let resCount = 0
      this.formList.NatureBusinessChange.forEach(item => {
        if (item.status != 'delete') {
          resCount += 1
        }
      })
      return resCount
    }
  },
  watch: {
    serviceInfo: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Object]') {
          this.entName = val.data.entName
          this.setPreData(val.data.id)
        }
      },
      deep: true,
      immediate: true
    },
  },
  mounted() {
    this.pageInit()
  },
  methods: {
    /**
     * 删除
     * @param {*} item
     * @param {*} index
     */
    deleEvent(item, index) {
      // this.formList.NatureBusinessChange.splice(index,1);
      this.formList.NatureBusinessChange[index].status = 'delete'
    },
    /**
     * 新增
     */
    addEvent() {
      // {type:'new',status:'',dataList:[]},
      this.formList.NatureBusinessChange.push({ type: 'new', status: 'add', dataList: [] },)
    },

    getNatureBusinessChangeData() {
      const tempArr = []
      this.formList.NatureBusinessChange.forEach(item => {
        const { type, status, dataList, id } = item
        if (status != 'delete') {
          if (type == 'db') {
            tempArr.push(id)
          }
          if (type == 'new') {
            tempArr.push(dataList[dataList.length - 1])
          }
        }
      })
      return tempArr
    },
    callback(key) {
      console.log(key);
    },
    cascaderChangeEvent(type, index, item, ...data) {
      console.log('cascaderChangeEvent===>', type, index, item, data);
    },
    pageInit() {
      this.setOption()

    },
    formEvent(type, data) {
      // console.log('formEvent===>', type, data);
      if (type === 'submit') {
        const { formKey, values } = data
        this.resForm[formKey] = { ...values }
      }
    },
    async saveData() {
      // const formList = ['entNameChange', 'registeredAddressChange']
      const formList = ['entNameChange']
      formList.forEach(item => {
        this.$refs[item].handleSubmit()
      })
      const checkParam = (data) => {
        const resArr = []
        // 校验 公司名称
        Object.keys(data).forEach(key => {
          if (key.indexOf('entName') >= 0) {
            const val = data[key]
            if (val == '' || val.length == 0) {
              resArr.push(false)
            }
          }
        })
        let res = true
        if (resArr.length > 0 && resArr.length < 5) {
          this.$message.warning('公司5个备用名称均不能为空！')
          res = false
        }
        return res
      }
      const manageIdArr = this.getNatureBusinessChangeData()
      // this.resForm.entNameChange
      const tempParam = {
        "entId": this.entId,
        "entName1": "",
        "entName2": "",
        "entName3": "",
        "entName4": "",
        "entName5": "",
        "manageId": manageIdArr,
        ...this.resForm.entNameChange
      }
      if (checkParam(tempParam)) {
        const res = await this.getDataForDb('工商注册变更信息提交', tempParam, '数据提交成功！')
        // if(res.message){
        //   this.$message.success(res.message)
        // }else {
        //   this.$message.success('提交成功1')
        // }
        this.serviceInfo.index = 14
        this.coloseEvent(this.serviceInfo)
      }
      // console.log('工商注册变更信息提交====>', tempParam, manageIdArr, this.formList.NatureBusinessChange);
    },

    async setOption() {
      const res = await this.getDataForDb('获取经营范围列表')
      // console.log('获取经营范围列表===>', res);
      this.getDataForResult(res)
    },
    async setPreData(entId_) {
      // const entId_ = this.serviceInfo.data.id
      const res = await this.getDataForDb('变更前详情查询', { entId: entId_ })
      // console.log('变更前详情查询===>',res);
      // if(res.code==200){
      const { entName, entId, managePre } = res
      this.enName = entName
      this.entId = entId
      const tempArr = []
      managePre && managePre.forEach(item => {
        // 经营范围ID  相关活动  经营范围  类目名称
        const { id, nodeActivty, nodeNature, parentName } = item
        tempArr.push({ id, type: 'db', status: '', dataList: [parentName, nodeNature] })
      })
      this.formList.NatureBusinessChangeDB = managePre
      this.formList.NatureBusinessChange = tempArr
      // }else{
      //   this.$message.warning(res.message)
      // }
    },

    getDataForResult(dataList) {
      let result2Obj = {}
      const getData = (dataList) => {
        const res = []
        dataList.forEach(item => {
          const { id, invoiceName, nodeName, nodeNature, children, leaf, parentId } = item
          let tempChild = []
          if (Object.prototype.toString.call(children) === '[object Array]' && children.length > 0) {
            tempChild = getData(children)
          }

          const resObj = { value: id, label: nodeName, children: tempChild, invoiceName, nodeNature }
          result2Obj[id] = nodeName
          resObj['children'] = tempChild
          if(tempChild.length>0 && parentId ==0){
            res.push(resObj)
          }
          if(parentId !=0){
            res.push(resObj)
          }
        })
        return res
      }
      const ss = getData(dataList)
      console.log('&&&&&&&&&&&', result2Obj,ss);
      this.options = ss
      this.optionObj = result2Obj

    },

    async getDataForDb(key, data, message_) {
      let res = {}
      try {
        const { code, result, message } = await getDataForDB(key, data)
        if (code == 200) {
          res = result
          if (message || message_) {
            this.$message.success(message || message_)
          }
        } else {
          this.$message.warning(message)
        }
      } catch (error) {
        console.log(key + ' 接口报错，具体原因如下：', error);
      }
      return res
    }
  },
}
</script>

<style lang="less">
.change-registration-info-con {
  .card-title {
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }

  .cri-body {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;

    .cri-item {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 10px 0;

      .key {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
      }

      .value {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }

      .jylb-list-con {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 10px 0;

        .list-item {
          flex: 1;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin: 5px 20px;

          .value {
            flex: 1;

            .ant-cascader-picker {
              width: 100%;
            }
          }
        }
      }

      .jylb-con {
        width: 100%;
        height: 192px;
        overflow-y: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .data-list {
          flex: 9;
          height: 192px;
          // background-color: #333333;
          // border-right: 1px solid #e8e8e8;
          overflow-y: auto;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: column;
          margin: 0 5px;

          .jylb-data-item {
            width: 100%;
            margin: 5px 0;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .item-value {
              flex: 3;
              width: 614px;
              height: 40px;
              line-height: 40px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              padding: 3px 5px;
            }

            .item-action {
              flex: 1;
            }
          }

          .ant-result {
            padding: 5px 32px;
          }
        }

        .data-action {
          flex: 1;
          height: 100%;
          // background-color: #b10808;
          display: flex;
          justify-content: flex-end;
          align-items: flex-start;
        }
      }
    }

    // .cri-item:nth-child(2){
    //   display: flex;
    //   justify-content: flex-start;
    //   align-items: center;
    //   flex-direction: column;
    //   .key1{
    //     width: 100%;
    //   }
    //   .value1{
    //     width: 100%;
    //   }
    // }
  }

  .cri-bottom {
    width: 100%;
    padding: 5px 100px;
  }

  .ant-cascader-picker {
    width: 99%;
  }
}
</style>
